<template>
 <div class="pagination-box">
    <el-pagination
        background
        @size-change="pageSizeChange"
        @current-change="pageNumChange"
        :current-page="page.pageNum"
        :page-size="page.pageSize"
        :page-sizes="pageSizes"
        layout="total, sizes, prev, pager, next"
        :total="total"
    >
    </el-pagination>
 </div>
</template>

<script>
 export default {
   props: {
    pageSizes: {
        type: Array,
        default: () => [12, 24, 48, 100]
    },
    page: {
        type: Object,
        default: () => {
            return {
                pageSize: 12,
                pageNum: 1
            }
        }
    },
    total: {
        type: Number,
        default: 0
    }
   },
   components: {

   },
   data () {
     return {

     }
   },
   computed: {

   },
   watch: {

   },
   created() {

   },
   mounted() {
   },
   methods: {
    pageSizeChange(val) {
      this.page.pageSize = val;
      this.$emit('getList')
    },
    pageNumChange(val) {
      this.page.pageNum = val;
      this.$emit('getList')
    }
   },
 }
</script>

<style scoped lang='less'>
</style>